<template>
	<view>
		<cu-custom bgColor="bg-black"><block slot="content">汇率查 一转一</block></cu-custom>
		
		<view class="cu-list menu sm-border currency_config">
			
			<view class="cu-item">
				<view class="content">
					<picker @change="bindPickerChangeStart" :value="startIndex" :range="currencyData">
						<view class="flex align-center justify-start text-lg align-center currency_item">
							<text class="text-gray">初始货币：</text>
							<text class="text-green text-lg currency_num">{{currencyData[startIndex]}}</text>
							<text class="cuIcon-unfold text-green"></text>
						</view>
					</picker>
				</view>
			</view>
				
			<view class="cu-item">
				<view class="content">
					<picker @change="bindPickerChangeTarget" :value="targetIndex" :range="currencyData">
						<view class="flex align-center justify-start text-lg align-center currency_item">
							<text class="text-gray">目标货币：</text>
							<text class="text-green text-lg currency_num">{{currencyData[targetIndex]}}</text>
							<text class="cuIcon-unfold text-green"></text>
						</view>
					</picker>
				</view>
			</view>
			
			<view class="exchange_btn flex align-center justify-center margin-tb-sm" @click="changeCurrency">
				<image class="exchange_icon" src="../../static/tabbar/exchange_one.png" />
			</view>
			
		</view>
		<view class="flex flex-direction align-center">
			<input v-show="isShowNativeCom" type="text" v-model="currencyValue" class="currency_input margin-top-sm text-xxl text-green" placeholder-class="text-xl" placeholder="请输入要转换金额">
			<view class="flex align-center margin-tb-sm">
				<view @click="clearCurrencyValue" class="currency_clear text-xl text-center bg-red">清除</view>
				<view @click="exchangeCurrency" class="currency_change text-xl text-center bg-blue">转换</view>
			</view>
		</view>
		
		<view class="cu-list menu sm-border" v-if="currencyResult">

			<view class="cu-item">
				<view class="content flex align-center">
					<text class="text-grey">转换：</text>
					<text class="text-lg text-green">{{currencyResult.fromname}}({{currencyResult.from}}) => {{currencyResult.toname}}({{currencyResult.to}})</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flex align-center">
					<text class="text-grey">汇率：</text>
					<text class="text-xxl text-green text-bold">{{currencyResult.rate}}</text>
					<button class="cu-btn line-green text-green margin-left" style="padding:0 10rpx" @tap="copyRateNum">复制</button>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flex align-center">
					<text class="text-grey">结果：</text>
					<text class="text-xxl text-green text-bold">{{formatAmount(currencyResult.camount)}}</text>
					<button class="cu-btn line-green text-green margin-left" style="padding:0 10rpx" @tap="copyConvertNum">复制</button>
				</view>
			</view>
			<view class="cu-item" v-if="currencyResult.updatetime">
				<view class="content flex align-center">
					<text class="text-grey">更新时间：</text>
					<text class="text-lg text-green"> {{currencyResult.updatetime}}</text>
				</view>
			</view>
			<view class="text-xs text-gray text-center" style="line-height: 52upx;">数据取自网络，仅供参考</view>
		</view>
		<!-- #ifdef MP-QQ -->
		<view class="ad_wrap">
			<common-ad unitId="cea947ac9719cb8f75d03237200450f6" adType="card" />
		</view>
		<!-- #endif -->
		
		<options-com @itemClick="otherAction" :list="[{title:'一转多',id:'onetomore'}]"/>
	</view>
</template>

<script>
	import Vue from "vue";
	import {requestExchangeCurrency,requestAllCurrency} from "../../controller/request_ctrl";
	import {getStorage, setStorage} from "../../utils/storage_util";
	import {formatTime, formatFloat} from "../../utils/util";
	import optionsCom from "../../components/options";
	import shareConfig from "../../utils/share_config";
	let initCurrency = ["CNY","USD"];
	let isShow = false;
	export default {
		data() {
			return {
				currencyData:[],
				targetIndex: 0,
				startIndex: 0,
				currencyValue:"",
				currencyResult: null,
				// {
				// 	rate: "-",
				// 	camount: "-",
				// 	updatetime:"-",
				// 	from:"-",
				// 	to:"-",
				// 	fromname:"-",
				// 	toname:"-"
				// }
				isShowNativeCom:true
			}
		},
		components:{
			optionsCom: optionsCom
		},
		onLoad() {
			// 是否存储是初始货币和目标货币
			let initCurrencyStorage = getStorage("oneToOneCurrencyStorage");
			if (initCurrencyStorage) {
				initCurrency = initCurrencyStorage
			}
			if (this.currencyAllList) {
				this.initCurrencyData();
			} else {
				this.requestAllCurrency(() => {
					this.initCurrencyData();
				})
			}
			let self = this;
			this.eventBus.$on("dlgChange",function(res) {
				if(!isShow) {
					return;
				}
				if (res == "show") {
					self.isShowNativeCom = false;
				} else if(res == "hidden") {
					self.isShowNativeCom = true;
				}
			});
		},
		onShareAppMessage() {
			return shareConfig();
		},
		onShow() {
			isShow = true;
			this.initDecimalCount();
			if (this.currencyValue) {
				this.exchangeCurrency();
			}
		},
		
		onHide() {
			isShow = false;
		},
		
		methods: {
			
			/**
			 * 初始化数据
			 */
			initCurrencyData() {
				let tempData = [];
				this.currencyAllList.forEach((item, index) => {
					tempData.push(item.name+" "+item.currency);
					if(item.currency == initCurrency[0]) {
						this.startIndex = index;
					}else if(item.currency == initCurrency[1]) {
						this.targetIndex = index;
					}
				});
				this.currencyData = tempData;
			},
			
			/**选择初始货币
			 * @param {Object} e
			 */
			bindPickerChangeStart(e) {
				this.startIndex = e.detail.value;
			},
			
			/**选择目标货币
			 * @param {Object} e
			 */
			bindPickerChangeTarget(e) {
				this.targetIndex = e.detail.value;
			},
			
			/**
			 * 转换货币
			 */
			exchangeCurrency() {
				if (!this.currencyValue) {
					uni.showToast({
						title:"请输入可用转换金额!",
						icon:"none"
					})
					return;
				}
				let from = this.currencyAllList[this.startIndex].currency;
				let to = this.currencyAllList[this.targetIndex].currency;
				requestExchangeCurrency(from, to, this.currencyValue).then((res) => {
					if (res.status == 0) {
						this.currencyResult = res.result;
					}
				})
				setStorage("oneToOneCurrencyStorage",[from, to]);
			},
			
			/**
			 * 清除转换值
			 */
			clearCurrencyValue() {
				this.currencyValue = "";
				this.currencyResult = null;
			},
			
			/**
			 * 交换货币
			 */
			changeCurrency() {
				let tempCurrency = this.targetIndex;
				this.targetIndex = this.startIndex;
				this.startIndex = tempCurrency;
				if (this.currencyValue) {
					this.exchangeCurrency();
				}
			},
			
			/**
			 * 左下角导航项传出的事件，根据id做不同操作
			 * @param {string} id
			 */
			otherAction(id) {
				console.log(id);
				let self = this;
				if(id == "onetomore") {
					uni.switchTab({
						url:"/pages/home/home"
					})
				}
			},
			
			/**
			 * 小数位保留处理
			 * @param {Number} mount 要做小数倍数取舍的值 
			 */
			formatAmount(mount) {
				let count = this.decimalDigitsNum;
				return formatFloat(mount, count)
			},
			/**
			 * 根据本地存储配置初始化小数保留数
			 */
			initDecimalCount() {
				this.decimalDigitsNum = getStorage("decimalDigitsForErtc");
			},
			
			/**
			 * 复制转换结要到剪贴板
			 */
			copyConvertNum() {
				let convertResultNum = this.formatAmount(this.currencyResult.camount);
				uni.setClipboardData({
					data:convertResultNum,
					success() {
						uni.showToast({
							icon:"none",
							title:"转换结果复制成功"
						})
					}
				})
			},
			
			/**
			 * 复制转化汇率
			 */
			copyRateNum() {
				let rate = this.currencyResult.rate;
				uni.setClipboardData({
					data:this.currencyResult.rate,
					success() {
						uni.showToast({
							icon:"none",
							title:"汇率复制成功"
						})
					}
				})
			}
		}
	}
</script>

<style>
.currency_config{
	position: relative;
}
.exchange_btn{
	width:90rpx;
	height:90rpx;
	border-radius: 5rpx;
	position: absolute;
	top:54rpx;
	right:10rpx;
	background-color: rgba(0,0,255,0.6);
}
.exchange_icon{
	width:80rpx;
	height:80rpx;
	transform:rotateZ(90deg);
}
.currency_item_wrap{
	border-radius: 10rpx;
}
.currency_item{
	width:100%;
	height:120rpx;
}
.currency_num{
	width:400rpx;
	margin-right: 10rpx;
	line-height: 68rpx;
}
.currency_input{
	width:620rpx;
	height:90rpx;
	padding: 0 10rpx;
	border-bottom: 1rpx solid #ccc;
}
.currency_clear{
	width:120rpx;
	height:90rpx;
	line-height: 90rpx;
	border-radius:10rpx;
	margin-right:10rpx;
}
.currency_change{
	width:420rpx;
	height:90rpx;
	line-height: 90rpx;
	border-radius:10rpx;
}
</style>
